<template>
	<view class="ss-flex-col gap-24">
		<view @tap="changeShow" class="title-box ss-flex ss-row-center">
			<view class="label-title ss-m-r-24">{{ label }}</view>
			<z-icon name="arrow-down" size="32rpx"></z-icon>
		</view>
		<slot v-if="state.show" />
	</view>
</template>

<script setup>
	const props = defineProps({
		label: {
			type: String,
			default: ''
		}
	})
	const state = reactive({
		show: true
	})
	const changeShow = () => {
		state.show = !state.show
	}
</script>

<style lang="scss" scoped>
	.title-box {
		width: 686rpx;
		height: 88rpx;
		background: #E8E8E8;
		border-radius: 4rpx;
		.label-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #999999;
		}
	}
</style>